<script setup>
import {ref} from 'vue'
const productList = [
  {
    type: "徽章",
    name: "IT社区文创 ：「代码新秀闪耀」 荣誉徽章",
    price: 29,
    stock: 30,
    img: "../static/img/product01.png",
  },
  {
    type: "帆布包",
    name: "【it社区文创】「极简主义」帆布包",
    price: 79,
    stock: 60,
    img: "../static/img/product02.png",
  },
  {
    type: "T恤",
    name: "蓝字魔法，解锁IT新风尚——百搭T恤衫",
    price: 12,
    stock: 100,
    img: "../static/img/product03.png",
  },
  {
    type: "U盘",
    name: "IT达人必备：128GB紫色技术社区U盘",
    price: 39,
    stock: 80,
    img: "../static/img/product04.png",
  },
  {
    type: "笔记本",
    name: "高端皮质IT笔记本，简约设计尽显专业气质",
    price: 29,
    stock: 30,
    img: "../static/img/product05.png",
  },
  {
    type: "鼠标垫",
    name: "文创字母鼠标垫「IT技术社区专属」",
    price: 79,
    stock: 60,
    img: "../static/img/product06.png",
  },
  {
    type: "马克杯",
    name: "白色陶瓷杯，简约IT标志，时尚办公新选择",
    price: 12,
    stock: 100,
    img: "../static/img/product07.png",
  },
  {
    type: "贴纸",
    name: "科技与创意碰撞——IT社区蓝色徽章文创",
    price: 39,
    stock: 80,
    img: "../static/img/product08.png",
  },
];
var cartItems = ref([]);
var totalPrice = ref(0);
 const addToCart = (product) => {
  const item = cartItems.value.find((item) => item.name == product.name);
  if (item) {
    item.count++;
  } else {
    cartItems.value.push({ ...product, count: 1 });
  }
  calcPrice();
};
const removeFromCart = (item) => {
  const index = cartItems.value.indexOf(item);
  if (index > -1) {
    cartItems.value.splice(index, 1);
  }
};
const handleChange = (item) => {
  if (item.count <= 0) {
    removeFromCart(item);
  }
  calcPrice();
};
const calcPrice = () => {
  totalPrice.value = cartItems.value.reduce((total, item) => {
    return total + item.price * item.count;
  }, 0);
};
</script>
<template>
  <div>
    <el-container>
      <el-container class="main">
        <el-main>
          <el-row>
            <el-col :span="8" v-for="(product, i) in productList" :key="i">
              <el-card style="width: 250px; height: 370px; margin: 5px">
                <el-image :src="product.img"></el-image>
                <p>{{ product.name }}</p>
                <el-row>
                  <el-col :span="12">价格:{{ product.price }}</el-col>
                  <el-col :span="12">库存:{{ product.stock }} </el-col></el-row
                >
                <el-button @click="addToCart(product)">加入购物车</el-button>
              </el-card>
            </el-col>
          </el-row>
        </el-main>
        <el-aside>
          <el-card>
            <h2>购物车</h2>
            <div v-if="cartItems.length > 0">
              <el-row v-for="(item, i) in cartItems" :key="i">
                <el-col
                  :span="6"
                  style="position: relative; top: 10px; left: -10px"
                >
                  <el-image :src="item.img"></el-image>
                </el-col>
                <el-col :span="18">
                  <p>{{ item.name }}</p>
                  <p>
                    ¥{{ item.price }}
                    <el-input-number
                      @click="handleChange(item)"
                      v-model="item.count"
                      :min="0"
                      :max="item.stock"
                      style="float: right"
                    />
                  </p>
                </el-col>
              </el-row>
            </div>
            <el-empty v-else description="">暂无商品</el-empty>
            <div>
              <el-col :span="10">总价:&nbsp;¥{{ totalPrice }}</el-col>
              <el-button type="primary">结算</el-button>
            </div>
          </el-card>
        </el-aside>
      </el-container>
    </el-container>
  </div>
</template>
<style scoped>
.main {
  width: 1200px;
  margin: 0 auto;

  background-color: white;
}
ul {
  list-style: none;
}
</style>
